<template>
  <div class="about">
    <el-input v-model="input1" placeholder="请输入内容"></el-input>
    <el-input v-model="input2" placeholder="请输入内容"></el-input>
    <el-button type="primary" @click="handleClick" :disabled="true">计算并弹出结果</el-button>
  </div>
</template>

<script>
export default {
  name: 'About',
  data(){
    return{
      input1:'',
      input2:''
    }
  },
  methods: {
    handleClick(){
      this.$alert(Number(this.input1)+Number(this.input2), '提示', {
        confirmButtonText: '确定', // 确认按钮文本
        callback: action => {}
      });
    }
    
  }
}
</script>

<style>
/* 
    .about 样式定义
    该样式主要应用于页面中的关于部分，设置了该部分的宽度、高度、背景色、阴影和边框圆角。
*/
.about{
  width: 100%; /* 设置宽度为100% */
  height: 600px; /* 设置高度为600px */
  background: rgba(255,255,255,0.5); /* 设置背景色为半透明的白色 */
  box-shadow: 0 0 10px #999; /* 设置盒子阴影，阴影大小为10px，颜色为#999 */
  border-radius: 10px; /* 设置边框圆角为10px */
}
</style>
